<template>
  <el-dialog
    id="dialogPreview"
    title="预览"
    :visible.sync="dialogData.isShow"
    width="630px"
    :before-close="labelHandleClose"
  >
    <!--预览区域-->
    <div class="title" v-html="dialogData.title" v-if="dialogData.title"></div>
    <span v-html="dialogData.content"></span>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="cancelLabel">继续编辑</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'dialogPreview',
  msg: '阅读管理-我的发布---预览弹窗',
  props: ['dialogData'],
  data() {
    return {}
  },
  mounted() {},
  methods: {
    cancelLabel() {
      // 关闭前清空
      this.dialogData.content = ''
      this.dialogData.title = ''
      this.dialogData.isShow = false
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    }
  }
}
</script>

<style lang="less">
#dialogPreview {
  .el-dialog__body {
    max-height: 600px;
    overflow: auto;
    img {
      max-width: 100%;
    }
    .title {
      text-align: center;
      font-size: 18px;
      line-height: 20px;
      margin-bottom: 15px;
      padding-top: 20px;
      color: #333;
    }
  }
}
</style>
